<template>
  <div class="main">
    <img src="/static/images/missionbg.jpg" class="background" />

    <div class="missionlist">
      <i-row>
        <i-col span="6" v-for="i in totalBarrier" :key="index">
          <i-button v-if='index<currentBarrier'type="info"
                    @click="QApage(index+1)" shape="circle" size="big">
            关卡{{ i+1 }}
          </i-button>
          <i-button v-else shape="circle" size="big" disabled>
            关卡{{ i+1 }}
          </i-button>
        </i-col>
      </i-row>
    </div>

  </div>
</template>

<script>
import httpKit from './http-kit'
import querystring from 'querystring'

export default {
  data () {
    return {
      openid: '',
      barrierInfo: {
        subject: '',
        grade: ''
      },
      totalBarrier: 0, //  总关卡
      currentBarrier: 0 //  已解锁的最高关卡
    }
  },
  methods: {
    QApage (barrierLevel) {
      wx.showLoading({title: '加载中...', mask: true})
      const baseUrl = '../../pages/QA/main'
      const query = querystring.stringify({
        barrierLevel
      })
      const url = baseUrl + '?' + query
      wx.navigateTo({url})
    },
    loadStorageData () {
      this.openid = wx.getStorageSync('userInfo').openid
      const subject = wx.getStorageSync('subject')
      const grade = wx.getStorageSync('grade')
      this.barrierInfo = {subject, grade}
      if (!(this.openid && this.barrierInfo)) {
        wx.navigateBack({
          delta: 1
        })
      }
    },
    getBarrier () {
      // 测试数据
      // this.totalBarrier = 22
      // this.currentBarrier = 5
      // 发送请求获取关卡
      httpKit.getBarrier(this.barrierInfo, this.openid,
        res => {
          this.totalBarrier = res.data.data.totalBarriers
          this.currentBarrier = res.data.data.latestBarrierDegree
        }
      )
    }
  },
  onShow () {
    this.totalBarrier = 0
    this.currentBarrier = 0
    this.loadStorageData()
    this.getBarrier()
  },
  onHide () {
    wx.hideLoading()
  },
  onPullDownRefresh () {
    this.getBarrier()
    wx.stopPullDownRefresh()
  }
}
</script>

<style scoped>
  .main{
    overflow: hidden;
  }
  .background {
    position: fixed;
    height: 100%;
    width: 100%;
  }
 .missionlist{
  margin-top: 200rpx;
}
  .btnsize{
    width: 20%;
  }
</style>
